/* eslint-disable no-undef */
<template>
  <div class="wrapper" ref="box">
    <!-- <button @click="add">点击</button> -->
  </div>
</template>

<script>
import Son from './Son'
import jsonData from '../assets/json/wenquanyi.json'

export default {
  components: {
    Son
  },
  props: {},
  data () {
    return {
      dataModel: null,
      g3d: null,
      view: null,
      text: null,
      formPane: null

    }
  },
  beforeCreate () {},
  created () {
    console.log('ht222', ht)
    this.init()
  },
  beforeMount () {},
  mounted () {},
  beforeUpdate () {},
  updated () {},
  beforeDestroy () {},
  destroyed () {},
  activated () {},
  methods: {
    // add () {
    //   // eslint-disable-next-line no-undef
    //   console.log('ht222', ht)
    // },
    init () {
      // eslint-disable-next-line no-undef
      let n = new ht.Node()
      console.log('n', n)
      // eslint-disable-next-line no-undef
      this.dataModel = new ht.DataModel()
      // eslint-disable-next-line no-undef
      this.g3d = new ht.graph3d.Graph3dView(this.dataModel)
      this.g3d.setGridSize(100)
      this.g3d.setGridVisible(true)
      this.view = this.g3d.getView()
      this.view.className = 'main'
      document.body.appendChild(this.view)
      window.addEventListener(
        'resize',
        function (e) {
          this.g3d.invalidate()
        },
        false
      )
      this.g3d.setEye([0, 100, 400])
      // eslint-disable-next-line no-undef
      ht.Default.loadFontFace(jsonData, function () {
        console.log(2)
        this.createTextNode()
        this.createFormPane()
      })
    },
    createTextNode () {
      console.log(22)
      // eslint-disable-next-line no-undef
      this.text = new ht.Node()
      // eslint-disable-next-line no-undef
      this.text.p3([ -150, 0, 0 ])
      // eslint-disable-next-line no-undef
      this.text.s({
        'shape3d': 'text',
        'shape3d.text': 'Hello ~,图扑软件'
      })
      // eslint-disable-next-line no-undef
      this.dataModel.add(text)
    },
    createFormPane () {
      console.log(33)
      // eslint-disable-next-line no-undef
      this.formPane = new ht.widget.FormPane()
      // eslint-disable-next-line no-undef
      this.formPane.setWidth(200)
      // eslint-disable-next-line no-undef
      this.formPane.setHeight(160)
      // eslint-disable-next-line no-undef
      this.formPane.getView().className = 'formpane'
      // eslint-disable-next-line no-undef
      document.body.appendChild(this.formPane.getView())

      // eslint-disable-next-line no-undef
      this.formPane.addRow(['curveSegments', {
        slider: {
          min: 1,
          max: 10,
          value: 4,
          onValueChanged: function () {
            // eslint-disable-next-line no-undef
            this.text.s('shape3d.text.curveSegments', this.getValue())
          }
        }
      } ], [ 100, 1 ])

      // eslint-disable-next-line no-undef
      this.formPane.addRow(['size', {
        slider: {
          min: 0.1,
          max: 5,
          value: 1,
          onValueChanged: function () {
            // eslint-disable-next-line no-undef
            this.text.s('shape3d.text.size', this.getValue())
          }
        }
      } ], [ 100, 1 ])

      // eslint-disable-next-line no-undef
      this.formPane.addRow(['amount', {
        slider: {
          min: 0.01,
          max: 5,
          value: 0.5,
          onValueChanged: function () {
            // eslint-disable-next-line no-undef
            this.text.s('shape3d.text.amount', this.getValue())
          }
        }
      } ], [ 100, 1 ])

      // eslint-disable-next-line no-undef
      this.formPane.addRow([ 'fill', {
        checkBox: {
          selected: true,
          onValueChanged: function () {
            // eslint-disable-next-line no-undef
            this.text.s('shape3d.text.fill', this.getValue())
          }
        }
      } ], [ 100, 1 ])

      // eslint-disable-next-line no-undef
      this.formPane.addRow(['spacing', {
        slider: {
          min: 0.01,
          max: 5,
          value: 1,
          onValueChanged: function () {
            // eslint-disable-next-line no-undef
            this.text.s('shape3d.text.spacing', this.getValue())
          }
        }
      } ], [ 100, 1 ])
    }
  },
  computed: {},
  watch: {}
}
</script>
<style >

</style>
